<template>
    <div class="wrapper">
        <!-- <Chart :id="options.id" :option="option"></Chart> -->
          <Chart :id="options.id" :option="option"></Chart>
    </div>
</template>

<script>
    import Chart from "@/components/chart/chart.vue";

    export default {
        name: "rateChart",
        components: { Chart },
        props: ["chartData", "options"],
        data() {
            return {
                option: {},
            };
        },
        watch: {
            chartData: {
                handler(newValue, oldValue) {
                    if (this.chartData) {
                        this.setOption();
                    }
                },
                deep: true
            }
        },
        mounted() {



        },
        methods: {
            setOption() {

                var barWidth = 20;
                this.option = {
                    // backgroundColor: 'black',
                    grid: {
                        top: '5%',
                        left: '15%',
                        right: '10%',
                        bottom: '0%',
                    },

                    xAxis: {
                        show: false,
                    },
                    yAxis: {
                        data: this.chartData.map((item, index) => `${item.name}`),
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            textStyle: { fontSize: '80%', color: '#02afff' },
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: false,
                    },
                    series: [
                        {
                            type: 'bar',
                            barWidth: barWidth,
                            zlevel: 2,
                            data: this.chartData.map(function (item) {
                                return {
                                    value: item.value,
                                    maxNum: 100,
                                };
                            }),
                            label: {
                                show: true,
                                position: 'inside',
                                align: 'center',
                                formatter: function (params) {

                                    var percent = Number((params.data.value / params.data.maxNum) * 100).toFixed(2) + '%';
                                    return percent;
                                },
                                color: '#fff',
                                fontSize: 12,
                                offset: [25, 1]
                            },
                            itemStyle: {
                                borderRadius: 10,
                            },
                        },
                        {
                            type: 'bar',
                            barWidth: barWidth,
                            barGap: '-100%',
                            data: this.chartData.map(function (item) {
                                return {
                                    realValue: item.value,
                                    value: 100,
                                };
                            }),
                            itemStyle: {
                                borderRadius: 10,
                                color: 'rgba(3,169,244, 0.5)',
                            },
                        },
                    ],
                };
                // this.option = {
                //     tooltip: {
                //         trigger: 'axis',
                //         axisPointer: {
                //             // Use axis to trigger tooltip
                //             type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                //         },
                //         formatter: function (params) {
                //             return params[0].value.name + ': ' + params[0].value.value + '%';
                //         }
                //     },
                //     dataset: [
                //         {
                //             dimensions: ['name', 'value'],
                //             source: this.chartData
                //         },

                //     ],
                //     // title: {
                //     //     text: this.options.title,
                //     //     textStyle: {
                //     //         fontSize: 14,
                //     //         color: "#333",
                //     //     },
                //     // },
                //     legend: {
                //         show: false
                //     },
                //     grid: {
                //         top: 24,
                //         left: '3%',
                //         right: '4%',
                //         bottom: '3%',
                //         containLabel: true
                //     },
                //     xAxis: {
                //         type: 'value',
                //         max: 100
                //     },
                //     yAxis: {
                //         type: 'category',
                //     },
                //     series: [
                //         {
                //             name: '履约率',
                //             type: 'bar',
                //             stack: 'total',
                //             label: {
                //                 show: true,
                //                 position: ['88%', '30%'],
                //                 formatter: function (params) {
                //                     return params.value.value + '%';
                //                 },
                //                 color: "#333"
                //             },
                //             itemStyle: {
                //                 // 设置柱状渐变色
                //                 // color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                //                 //   { offset: 0, color: '#83bff6' },

                //                 //   { offset: 1, color: '#188df0' }
                //                 // ]),
                //                 // color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                //                 // color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                //                 //     {
                //                 //         offset: 0,
                //                 //         color: 'rgb(136 155 216)'
                //                 //     },
                //                 //     {
                //                 //         offset: 1,
                //                 //         color: 'rgb(77, 119, 255)'
                //                 //     }
                //                 // ])

                //             },
                //             emphasis: {
                //                 focus: 'series'
                //             },
                //         },

                //     ]
                // };
            },
        },
    };
</script>
<style lang="scss" scoped>
    .wrapper {}
</style>